// src/components/reactions.tsx
import React, {useEffect, useState} from 'react';
import {useWorkspaceId} from "@/hooks/social/use-workspace-id";
import {useCurrentMember} from "@/features/workspaces/api/use-current-member";
import {Member} from "@/lib/social/types";
import {cn} from "@/lib/utils";
import Hint from "@/components/social/hint";
import EmojiPopover from "@/components/social/emoji-popover";
import {MdOutlineAddReaction} from "react-icons/md";
import {useCurrentUser} from "@/hooks/use-current-user";

interface Props {
    data: {
        id: string;
        count: number
        RelationMemberIds: string[]
        value: string
    }[]
    onChange: (value: string) => void
}

const Reactions = ({data, onChange}: Props) => {
    console.log('reactions data', data)
    const user = useCurrentUser()

    const workspaceId = useWorkspaceId()
    const [currentMember, setCurrentMember] = useState<Member>();
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        (async () => {
            const {data, isLoading} = await useCurrentMember({
                workspaceId, userId: user?.id!
            })
            setLoading(isLoading)
            setCurrentMember(data)
        })()
    }, [workspaceId, loading]);

    if (!currentMember?.id || loading) {
        return <div>loading...</div>
    }
    if (!data || data?.length === 0) return null

    return (
        <div className={`flex items-center gap-1 my-1`}>
            {data.map((r, idx) => (
                <Hint
                    key={idx}
                    label={`
                ${r.count} ${r.count === 1 ? 'person' : 'people'} reacted with ${r.value}
                `}>
                    <button
                        onClick={() => onChange(r.value)}
                        className={cn(
                            `h-6 px-2 rounded-full bg-slate-200/70 border border-transparent text-slate-800
                        flex items-center gap-x-1`,
                            r.RelationMemberIds.includes(currentMember.id) &&
                            `bg-blue-100/70 border-blue-500 text-white`
                        )}
                        // key={r.id}
                    >
                        {r.value}
                        <span
                            className={cn(
                                `text-xs font-semibold text-muted-foreground`,
                                r.RelationMemberIds.includes(currentMember.id) && 'text-blue-500'
                            )}
                        >{r.count}</span>
                    </button>
                </Hint>
            ))}
            <EmojiPopover
                hint={`Add reaction`}
                // onEmojiSelected={(emoji) => onChange(emoji.native)}
                onEmojiSelected={(emoji) => onChange(emoji)}
            >
                <button className={
                    `h-7 px-3 rounded-full bg-slate-200/70 border border-transparent text-slate-800 
                    flex items-center gap-x-1 hover:text-slate-500`}>
                    <MdOutlineAddReaction className={`size-4`}/>
                </button>
            </EmojiPopover>
        </div>
    );
};

export default Reactions;